<template>
  <div class="bigbox">
    <div class="user-box">
        <!-- 头部，登录注册 -->
        <div class="title">
            <router-link to="/login">登录</router-link>
            <span>·</span>
            <router-link to="/register">注册</router-link>
        </div>

        <!-- 表单 -->
        <el-form  :model="formData"  :rules="myrules"  ref="regForm" label-width="0px"  class="demo-ruleForm">
            <el-form-item  prop="regName">
                <el-input prefix-icon="el-icon-user-solid" v-model="formData.regName" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item  prop="regPaw">
                <el-input  v-model="formData.regPaw" placeholder="密码">
                     <i slot="prefix" class="el-icon-s-goods"></i>
                </el-input>
            </el-form-item>
            <el-form-item  prop="regPaw2">
                <el-input v-model="formData.regPaw2" placeholder="确认密码">
                    <i slot="prefix" class="el-icon-s-goods"></i>
                </el-input>
            </el-form-item>

            <el-form-item>
                <el-button class="reg-btn" type="success"  @click="submitForm('regForm')">注册</el-button>
            </el-form-item>
        </el-form>

    </div>
  </div>
</template>

<script>
// 引入axios
import axios from "axios";

export default {
  data() {
    //  自定义校验规则
    var validateRePass = (rule, value, callback) => {
        if (value === '') {
            console.error("请再次输入密码")
            // 显示在验证消息里面的
            callback(new Error('请再次输入密码'));
        } else if (value !== this.formData.regPaw) {
            console.error("两次输入密码不一致")
            callback(new Error('两次输入密码不一致!'));
        } else {
            callback();
        }
    };
    return {
      formData: {
        regName: "",
        regPaw:"",
        regPaw2:"",
      },
      myrules: {
        // 规则的名称和prop里面的值保持一致 required固定属性表示必须填写
        // message表示错误信息  trigger表示触发事件
        regName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 12, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        regPaw: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { pattern:/^[a-zA-Z\d]{6,12}$/, message: "密码长度在6-12位", trigger: "blur" },
        ],
        regPaw2: [
            { validator: validateRePass, trigger: 'blur' }
        ],
      },
    };
  },
  methods: {
    // 点击按钮提交方法
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        // 表单验证通过
        if (valid) {
          alert("submit!");
          // 发起请求给服务器（注册）
          axios.post("http://127.0.0.1:3000/doRegister",this.formData)
          .then(res => {
            // 获取服务器响应信息
            console.log(res.data)
            // 根据服务器响应判断后面的操作
            // 如果code=0表示注册成功
            if(res.data.code===0){
              alert("注册成功！")
              // 跳转到登录页面
              this.$message({
                message: "注册成功",
                type:"success"
              });
              // 跳转到登录页面
              this.$router.push("/login")
            }
          })
          
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.bigbox {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: pink;
}
.user-box {
  width: 300px;
  min-height: 300px;
  background-color: white;
  border-radius: 10px;
  margin: 80px auto;
  padding: 20px 30px;
}
.title {
  text-align: center;
  margin-bottom: 40px;
}
.title a {
  font-size: 20px;
  margin: 0px 15px;
  padding-bottom: 6px;
}
.title span {
  font-weight: bold;
}
.router-link-active {
  font-weight: bold;
  color: orangered;
  border-bottom: 2px solid orangered;
}
.reg-btn{
    width: 100%;
}
</style>